<template id='guess'>
    <div class="guess dCenter" v-if="isShow">
        <div class="content cCenter">
            <div class="top">
                <div class="topTitle">我想找</div>
                <img :src="closeIcon" @dragstart.prevent @click="closeGuess">
            </div>
            <div class="linkGroup">
                <div class="linkItem dCenter" v-for="(item, index) in linkList" :key="index"
                    :class="{ isSelect: currentSelect == item.id }" @click="choseLink(item)">
                    <span>{{ item.name }}</span>
                </div>
            </div>
            <div class="finishBtn dCenter" @click="finish" :class="{ hasSelect: currentSelect !== 0 }">
                <span>完成</span>
            </div>
        </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）


export default {
    name: '',
    components: {
    },
    props: {
        isShow: {
            type: Boolean
        }
    },
    // 定义属性 找玩伴/游戏开黑/结伴旅游/聊天唠嗑/娱乐八卦/热门追剧/学习交流/休闲美食/时尚美妆/运动健身/公益环保/创业交流/数码科技/
    data() {
        return {
            closeIcon: require('@/assets/images/components/close.png'),
            linkList: [
                { id: 1, name: "找玩伴" },
                { id: 2, name: "游戏开黑" },
                { id: 3, name: "结伴旅游" },
                { id: 4, name: "聊天唠嗑" },
                { id: 5, name: "娱乐八卦" },
                { id: 6, name: "热门追剧" },
                { id: 7, name: "学习交流" },
                { id: 8, name: "休闲美食" },
                { id: 9, name: "时尚美妆" },
                { id: 10, name: "运动健身" },
                { id: 11, name: "公益环保" },
                { id: 12, name: "创业交流" },
                { id: 13, name: "数码科技" },
            ],
            currentSelect: 0,
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        choseLink(item) { //选择你想找
            this.currentSelect = item.id
        },
        closeGuess() { //关闭弹窗
            this.$emit('close')
        },
        finish() { //选择完成
            if (this.currentSelect !== 0) {
                this.$emit('finish')
            }
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.guess {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);

    .content {
        width: 804px;
        background: #FFFFFF;
        border-radius: 24px;
        border: 1px solid #999999;
        padding: 72px 38px 54px 38px;

        .top {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            position: relative;

            .topTitle {
                font-size: 54px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #333333;
            }

            img {
                width: 40px;
                height: 40px;
                position: absolute;
                right: 0;
            }
        }

        .linkGroup {
            margin-top: 78px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 0 41px;

            .linkItem {
                width: 240px;
                height: 90px;
                background: #F5F6FA;
                border-radius: 45px;
                margin-bottom: 42px;

                span {
                    font-size: 42px;
                    font-family: PingFang-SC-Regular, PingFang-SC;
                    font-weight: 400;
                    color: #6471A7;
                }
            }

            .isSelect {
                background: #6680EE;

                span {
                    color: #FFFFFF;
                }
            }
        }

        .finishBtn {
            margin-top: 90px;
            width: 100%;
            height: 150px;
            background: #ccc;
            border-radius: 30px;

            span {
                font-size: 48px;
                font-family: PingFang-SC-Medium, PingFang-SC;
                font-weight: 500;
                color: #FFFFFF;
            }
        }

        .hasSelect {
            background: #4263EB;
        }
    }
}
</style>